<template>
  <div class="mainbox">
    <Banner></Banner>
    <!--人人为我，我为人人-->
    <img src="../../assets/images/list_new/woweirenren.png" alt="" class="ren">
    <img src="../../assets/images/list_new/renrenweiwo.png" alt="" class="wo">
    <!--人人为我，我为人人-->
    <mainContent :catname="catename">
      <div slot="menu_list">
        <dl>
          <dt class="menu_dt" :style="{backgroundImage: 'url(' + menu_bg + ')'}"><span class="iconfont icon-shijian"></span>{{catename}}</dt>


          <dd v-for="(item,index) in new_menu_list" :class="active==index?'menu_dd hover':'menu_dd'"
              @click="ToNewPath(item,index)">{{item.title}}
          </dd>


          <!--<dd class="menu_dd" :class="{'hover':active == 0}" @click="onTab(0)">-->
            <!--<router-link :to="{name: 'OurLine'}">我们的队伍</router-link>-->
          <!--</dd>-->


          <!--<dd class="menu_dd" :class="{'hover':active == 1}">-->
            <!--<router-link :to="{name: 'ListNewDefault'}">志愿服务</router-link>-->
          <!--</dd>-->

          <!--<dd class="menu_dd" :class="{'hover':active == 2}">-->
            <!--<router-link :to="{name: 'sixNews'}">六传六讲</router-link>-->
          <!--</dd>-->

          <!--<dd class="menu_dd" :class="{'hover':active == 3}" @click="onTab(3)">-->
            <!--<router-link :to="{name: 'PointsMall'}">积分商城</router-link>-->
          <!--</dd>-->

          <!--<dd class="menu_dd" :class="{'hover':active == 4}">-->
            <!--<router-link :to="{name: 'StarFamily'}">积分银行</router-link>-->
          <!--</dd>-->



        </dl>
      </div>

      <div slot="inner_content" class="inner_content">
        <div class="page_con" style="padding-right: 30px;height: 630px;padding-left: 30px;">



          <div v-if="is_flag==1" class="right">
            <div v-for="(item,index) in dynamicList" :key="index" @click="toPath(item)" class="dynamic_list">
              <p class="title_list" style="color: black;font-size: 30px">{{item.title}}</p>
              <div class="title_desc">{{item.desc}}</div>
              <p class="title_time" style="font-size: 28px;color: #a3afb7;text-align: right">{{item.create_at }}</p>
            </div>

          </div>
          <div v-if="is_flag==0"  v-html="new_rich_content"></div>
          <router-view v-if="is_flag==2 || is_flag==4"  @childData2="getactive"></router-view>


        </div>




      </div>

    </mainContent>
    <footerBar></footerBar>
    <MainMenu></MainMenu>

  </div>
</template>

<script>
  import Banner from '../../components/bannder/Banner'
  import MainMenu from '../../components/mainmenu/MainMenu'
  import footerBar from '../../components/content/footerBar'
  import mainContent from '../../components/content/mainContent'

  export default {
    name: "list_new_index",
    data() {
      return {
        new_menu_list:[],//新列表的菜单数组
        active:0,//当前的激活选项，默认为0
        new_rich_content:'',//新的富文本内容
        is_flag:2,//判断文章的显示状态，0文章页，1列表，
        dynamicList: [],//富文本数据
        rich_info:'',//通用栏目富文本数据
        random:0,
        title_detail:'',//调往详情页面的标题




        catename: '',
        activeNo: '',
        showSubService: false,
        showSub: false,
        flag: false,//默认不显示高亮
        menu_bg:''
      }
    },
    components: {
      Banner,
      MainMenu,
      footerBar,
      mainContent,
    },

    watch: {
      //监听相同路由下参数变化的时候，从而实现异步刷新
      '$route'(to, from) {
        this.random = this.$route.query.random;
        this.$router.go(0);
      },
    },

    created() {
      console.log('this.$route.path:',this.$route.query);
      // this.catename=this.$route.query.name;
      this.$util.storage.set("cityPrice",this.$route.query.name);
      this.catename=this.$route.query.name;

      this.menu_bg=this.$util.storage.get("menu_bg");


      this.getColumnContent();
    },

    // watch: {
    //     //监听相同路由下参数变化的时候，从而实现异步刷新
    //   '$route'(to, from) {
    //     this.type = this.$route.query.random;
    //     this.$router.go(0);
    //   },
    // },

    methods: {
      ToNewPath(item,index){
        this.active=index;
        this.title_detail=item.title;//保存跳往详情页面的标题
        console.log('点击获得的item值为：',item);
        if (item.is_flag==0) {
          console.log('flag:',item.is_flag);
          this.is_flag=item.is_flag;
          this.new_rich_content=item.content;
        }else if (item.is_flag==1){
          this.is_flag=item.is_flag;

          if (item.link.search("govern")!=-1){
            let that = this;
            let pid = that.$util.getUrlParam('pid',item.link);
            let type = that.$util.getUrlParam('type',item.link);
            console.log('pid',pid);
            console.log('type',type);
            that.$http.get("/api/Screen/getColumnContent2",{pid:pid ,type:type,page:1,limit: 10000,vollege_id:that.$util.vollege_id},r=>{
              console.log('获取到的列表页数据为：',r.data.data);
              that.dynamicList=r.data.data;
            });

          }else{
            let that = this;
            that.$http.get("/api/Screen/getColumnContent2",{pid:item.id,type:item.type,page:1,limit: 10000,vollege_id:that.
                $util.vollege_id},r=>{
              console.log('获取到的列表页数据为：',r.data.data);
              that.dynamicList=r.data.data;
            });
            console.log('flag:',item.is_flag)
          }



        } else if(item.is_flag==2 || item.is_flag==4){
          console.log('flag:',item.is_flag);
          this.is_flag=item.is_flag;
          if (item.link.search("go")!=-1){
            this.$router.push(item.link);
          }else{
            if(item.link=='/list_new/'){
               this.$router.go(0);
               // return;
            }else {
              this.$router.push({ path:item.link, query: { name: item.title,pid:item.id,type:item.type,random:Math.random()*10,activeindex:index}});
            }

          }

        }



      },

      toPath(item) {
        console.log('进入详情页面：', item);
        this.$router.push("/detail?id=" + item.id+"&name="+this.title_detail);
      },//点击进入详情页面

      getColumnContent(){
        let that = this;
        that.$http.get("/api/Screen/getColumnContent2",{pid:that.$route.query.pid,type:that.$route.query.type,page:1,limit:
            10000,vollege_id:that.$util.vollege_id},r=>{
          console.log('获取新栏目的数据为：',r.data.data);
          console.log('获取新栏目的富文本为：',r.data.info);
          this.new_menu_list=r.data.data;
          if (r.data.info.length!=0) {
            console.log('设置里通用富文本数据！');
            that.is_flag=0;
            that.new_rich_content= r.data.info;
          }

          // if(r.data.info.length!=0 || r.data.data[0].is_flag==0){
          //     this.new_rich_content=r.data.info.replace(/ /g,'').length!=0?r.data.info:r.data.data[0].content;
          // }

        });

      },//获取栏目菜单，类型为文章页，列表页，混合页
















      getactive(data){
        console.log('子向父传递过来的值为：',data);
        this.active=data;
      },



      onTab(i) {
        this.active = i;
        this.showSubService = false;
        this.showSub = false;

        console.log('llll', this.active)

      },

      menuTab(i) {
        let that = this;
        that.activeNo = i;
        console.log('iii', i)

      },

      onShowSub(i) {
        if (i == 1) {
          if (this.showSubService) {
            this.showSubService = false;
          } else {
            this.showSubService = true;
            this.showSub = false;
          }
        } else if (i == 2) {
          if (this.showSub) {
            this.showSub = false;
          } else {
            this.active = i;
            this.showSub = true;
            this.showSubService = false;
          }
        }
      },


    }
  }
</script>

<style scoped>
  .inner_content {
    box-sizing: border-box;
    padding-top: 60px;
  }

  .mainbox {
    position: relative;
  }

  .ren {
    position: absolute;
    z-index: 999;
    top: 18%;
    left: 54%;
  }

  .wo {
    position: absolute;
    top: 18%;
    left: 20%;
    z-index: 999;

  }

  .menu_list {
    position: absolute;
    left: 0;
  }


  .son_menu {
    width: 150px;
    height: 54px;
    line-height: 54px;
    margin: 15px auto;
    text-align: center;
    font-size: 18px;
    color: #fff;
    background: url('../../assets/images/page/son_menu.png') no-repeat left center;
    transition: all 0.3s ease-out;
  }

  .son_menu a {
    color: #fff;
  }

  .son_menu.hover {
    background: url('../../assets/images/page/son_menu_hover.png') no-repeat left center;
  }

  .menu_dd.have {
    transition: all 0.3s ease-in;
  }




  .right {
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    padding-left: 30px;
    padding-right: 30px;
    overflow-y: scroll;
  }

  .dynamic_list {
    margin-bottom: 15px;
    width: 100%;
    height: 130px;
    box-sizing: border-box;
    padding-left: 10px;
    border-bottom: 2px solid #cccccc;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }
  .title_list{

  }
  .title_desc{
    width: 82%;
    text-align: left;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
  .title_time{

  }

</style>
